<template>
  <div :class="wrapClasses" :style="styles" @click="handleClick">
    <div v-if="total !== stepNumber" :class="[prefixCls + '-tail']"><i></i></div>
    <div :class="[prefixCls + '-head']">
      <div :class="[prefixCls + '-head-inner']">
        <span v-if="status !== 'finish' && status !== 'error'">{{ stepNumber }}</span>
        <span v-else :class="iconClasses"></span>
      </div>
    </div>
    <div :class="[prefixCls + '-main']">
      <div :class="[prefixCls + '-title']">{{ title }}</div>
      <slot>
        <div v-if="content" :class="[prefixCls + '-content']">{{ content }}</div>
      </slot>
    </div>
  </div>
</template>
<script>
import { oneOf } from 'view-design/src/utils/assist'

const prefixCls = 'ivu-steps'
const iconPrefixCls = 'ivu-icon'

export default {
  name: 'Step',
  props: {
    // eslint-disable-next-line vue/require-default-prop
    status: {
      validator(value) {
        return oneOf(value, ['wait', 'process', 'finish', 'error'])
      }
    },
    title: {
      type: String,
      default: ''
    },
    // eslint-disable-next-line vue/require-default-prop
    content: {
      type: String
    },
    nextError: {
      type: Boolean
    },
    // eslint-disable-next-line vue/require-default-prop
    stepNumber: {
      type: Number
    },
    // eslint-disable-next-line vue/require-default-prop
    total: {
      type: Number
    },
    canSelect: {
      type: Boolean
    }
  },
  data() {
    return {
      prefixCls: prefixCls
    }
  },
  computed: {
    wrapClasses() {
      return [
        `${prefixCls}-item`,
        `${prefixCls}-status-${this.status}`,
        {
          [`${prefixCls}-custom`]: !!this.icon,
          [`${prefixCls}-next-error`]: this.nextError,
          pointer: this.canSelect,
          disabled: !this.canSelect,
          last: this.total === this.stepNumber
        }
      ]
    },
    styles() {
      return [{ width: `${1 / this.total * 100}%` }]
    },
    iconClasses() {
      let icon = ''

      if (this.status === 'finish') {
        icon = 'ios-checkmark'
      } else if (this.status === 'error') {
        icon = 'ios-close'
      }

      return [
        `${prefixCls}-icon`,
        `${iconPrefixCls}`,
        {
          [`${iconPrefixCls}-${icon}`]: icon !== ''
        }
      ]
    }
  },
  methods: {
    handleClick() {
      if (this.canSelect) {
        this.$emit('click')
      }
    }
  }
}
</script>

<style scoped>
  .pointer {
    cursor: pointer;
  }
  .disabled {
    cursor: not-allowed;
  }
  .last {
    max-width: fit-content;
  }
</style>
